<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>136-css-单页滑动页面.html</title>
	<link rel="stylesheet" href="fontawesome-free-5.11.2-web/css/all.css">
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.page>input,
		.page>a{
			position: fixed;
			top: 0;
			width: 20%;
			height: 34px;
			line-height: 34px;
			text-align: center;
		}
		#ctr1,#ctr1+a{
			left: 0%;
		}
		#ctr2,#ctr2+a{
			left: 20%;
		}
		#ctr3,#ctr3+a{
			left: 40%;
		}
		#ctr4,#ctr4+a{
			left: 60%;
		}
		#ctr5,#ctr5+a{
			left: 80%;
		}
		.page>input{
			z-index: 999;
			opacity: 0;
			cursor: pointer;
		}
		.page>a{
			background-color: gray;
			text-decoration: none;
			font-size: 22px;
			color: #fff;
			z-index: 1;
		}
		.page>a>.fa{
			margin-right: 5px;
		}
		.page>input:checked + a{
			color: red;
		}
		.page>input:hover + a{
			color: #111;
		}
		html,body{
			height: 100%;
		}
		.page{
			height: 100%;
			overflow: hidden;
		}
		.content{
			margin-top: 34px;
			height: 100%;
			transition: all 0.5s;
		}
		.panel{
			height: 100%;
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
		#ctr1:checked ~ .content{
			transform: translateY(0%);
		}
		#ctr2:checked ~ .content{
			transform: translateY(-100%);
		}
		#ctr3:checked ~ .content{
			transform: translateY(-200%);
		}
		#ctr4:checked ~ .content{
			transform: translateY(-300%);
		}
		#ctr5:checked ~ .content{
			transform: translateY(-400%);
		}
		#home{
			background-image: url(../photo/fj1.jpeg);
		}
		#service{
			background-image: url(../photo/8.26-01.jpeg);
		}
		#about{
			background-image: url(../photo/big1.jpg);
		}
		#team{
			background-image: url(../photo/8.26-02.jpeg);
		}
		#contact{
			background-image: url(../photo/big2.jpg);
		}
		#ctr1:checked ~ .content #home{
			animation: sport 2s linear 0s 1 normal;
		}
		#ctr2:checked ~ .content #service{
			animation:sport 2s linear 0s 1 normal;
		}
		#ctr3:checked ~ .content #about{
			animation:sport 2s linear 0s 1 normal;
		}
		#ctr4:checked ~ .content #team{
			animation:sport 2s linear 0s 1 normal;
		}
		#ctr5:checked ~ .content #contact{
			animation:sport 2s linear 0s 1 normal;
		}
		@keyframes sport{
			form{
				opacity: 0;
			}
			to{
				opacity: 1;
			}
		}
	</style>
</head>
<body>
	<div class="page">
		<input type="radio" name="radio-set" id="ctr1" checked>
		<a href="#"><i class="fa fa-home"></i>Home</a>
		<input type="radio" name="radio-set" id="ctr2">
		<a href="#"><i class="fa fa-coffee"></i>Service</a>
		<input type="radio" name="radio-set" id="ctr3">
		<a href="#"><i class="fa fa-building"></i>About</a>
		<input type="radio" name="radio-set" id="ctr4">
		<a href="#"><i class="fa fa-users"></i>Team</a>
		<input type="radio" name="radio-set" id="ctr5">
		<a href="#"><i class="fa fa-phone"></i>Contact</a>
		<div class="content">
			<div class="panel" id="home"></div>
			<div class="panel" id="service"></div>
			<div class="panel" id="about"></div>
			<div class="panel" id="team"></div>
			<div class="panel" id="contact"></div>
		</div>
	</div>
</body>
</html>